<template>
  <div class="make-processing-order">
    <el-row>
      <el-col :span="4">
        <div class="materialListBox">
          <div class="materialListTitle">料单列表</div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="半成品(10)" name="0">
              <div
                class="materialListCon"
                v-for="(item, index) in materialList"
                :key="index"
              >
                <div class="materialListName">
                  {{ index + 1 }}.{{ item.name }}
                </div>
                <div class="materialListText">
                  <div class="mart10">需用日期: {{ item.demandDate }}</div>
                  <div class="mart10">总重量: {{ item.totalWeight }}</div>
                  <div class="mart10">待排程: {{ item.toBeScheduled }}</div>
                  <div class="mart10">进度: {{ item.speedOfProgress }}</div>
                </div>
                <div class="mart10">
                  <el-checkbox v-model="item.checked"
                    >隐藏该料单的钢筋</el-checkbox
                  >
                </div>
                <div style="text-align: right">
                  <el-button size="mini">详情</el-button>
                  <el-button size="mini" type="primary">移除</el-button>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="钢筋笼(0)" name="1">钢筋笼(0)</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="20">
        <div style="padding: 20px">
          <div class="btnBox">
            <el-button size="small" type="primary" @click="addMaterialListBtn">添加料单</el-button>
            <i class="el-icon-arrow-right marl10" v-if="activeName !== '1'"></i>
            <el-button size="small" type="primary" @click="selectRebar" v-if="activeName !== '1'">选择钢筋</el-button>
            <i class="el-icon-arrow-right marl10"></i>
            <el-button size="small" type="primary" @click="generateProcessingOrderBtn">生成加工单</el-button>
          </div>

          <div class="tableBox" v-if="activeName === '0'">
            <div class="materialListTitle">点击数量列文字可选择本次需要加工的根数</div>
            <div class="materialListTitle">共200条记录，共计100吨</div>

            <el-table v-loading="loading" ref="multipleTable" :data="partiallyPreparedProductsData" key="id" :header-cell-class-name="columnStyle" :cell-class-name="columnStyle" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="序号" width="55" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="name" label="料单编号" align="center"></el-table-column>
              <el-table-column prop="name" label="分部分项" align="center"></el-table-column>
              <el-table-column prop="name" label="料单" align="center"></el-table-column>
              <el-table-column prop="name" label="工艺" align="center"></el-table-column>
              <el-table-column prop="name" label="规格" align="center"></el-table-column>
              <el-table-column label="数量" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.value }}</span>
                  <i class="el-icon-edit icon" @click="numClick(scope.row)"></i>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="长度(mm)" align="center"></el-table-column>
              <el-table-column prop="date" label="简图" align="center"></el-table-column>
              <el-table-column prop="name" label="重量(kg)" align="center"></el-table-column>
              <el-table-column prop="name" label="备注" align="center"></el-table-column>
              <el-table-column prop="name" label="工区" align="center"></el-table-column>
              <el-table-column prop="name" label="构件" align="center"></el-table-column>
              <el-table-column prop="name" label="行号" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="tableBox" v-if="activeName === '1'">
            <div class="materialListTitle">可在此选择需要排产的构件</div>
            <div class="materialListTitle">共200条记录，共计100吨</div>

            <el-table v-loading="loading" ref="table" :data="reinforcementCageData" key="ids">
              <el-table-column label="序号" width="55" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="name" label="工区" align="center"></el-table-column>
              <el-table-column prop="name" label="分部分项" align="center"></el-table-column>
              <el-table-column prop="name" label="料单编号" align="center"></el-table-column>
              <el-table-column prop="name" label="料单名称" align="center"></el-table-column>
              <el-table-column prop="name" label="构件名称" align="center"></el-table-column>
              <el-table-column prop="name" label="重量(kg)" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <quantity ref="quantity" />
    <add-material-list ref="addMaterialList" />
    <generate-processing-order ref="generateProcessingOrder" />
  </div>
</template>

<script>
import quantity from './dialog/quantity.vue'
import addMaterialList from './dialog/add-material-list.vue'
import generateProcessingOrder from './dialog/generate-processing-order/index.vue'

export default {
  name: "MakeProcessingOrder",
  components: { quantity, addMaterialList, generateProcessingOrder },
  props: {},
  data() {
    return {
      activeName: "0",
      checked: true,
      materialList: [
        {
          id: "1",
          name: "LD123/工区1/分部分项1/料单名称",
          demandDate: "5天内",
          totalWeight: "1吨",
          toBeScheduled: "1吨",
          speedOfProgress: "10%",
          checked: false,
        },
        {
          id: "2",
          name: "LD123/工区1/分部分项1/料单名称",
          demandDate: "5天内",
          totalWeight: "1吨",
          toBeScheduled: "1吨",
          speedOfProgress: "10%",
          checked: false,
        },
      ],

      loading: false,
      partiallyPreparedProductsData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          value: 1
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          value: 1
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          value: 1
        },
      ],
      reinforcementCageData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          value: 0
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          value: 1
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          value: 1
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          value: 1
        },
      ],

      tableBackground: ''
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleClick(tab) {
      console.log(tab.$options.propsData.name);
      this.activeName = tab.$options.propsData.name
    },
    numClick(val) {
      console.log(val)
      this.$refs.quantity.edit(val)
    },
    addMaterialListBtn() {
      this.$refs.addMaterialList.add()
    },
    generateProcessingOrderBtn() {
      this.$refs.generateProcessingOrder.add()
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return this.tableBackground
      }
    },
    selectRebar() {
      console.log('选择')
      const that = this
      that.tableBackground = 'tableBackground'
      setTimeout(function () {
        that.tableBackground = ''
      },300);
    }
  },
};
</script>

<style scoped lang="scss">
.make-processing-order {
  padding: 20px;
  ::v-deep {
    .tableBackground {
      background: rgb(92, 182, 255, 0.4);
    }
    .el-tabs__nav {
      width: 100%;
    }
    .el-tabs__active-bar {
      width: 50%;
    }
    .el-tabs__item {
      width: 50%;
      text-align: center;
      padding: 0;
    }
  }
  .icon {
    color: #5cb6ff;
    margin-left: 6px;
    cursor: pointer;
  }
  .mart10 {
    margin: 10px 0;
  }
  .marl10 {
    margin: 0 10px;
  }
  .materialListTitle {
    font-weight: 400;
    font-size: 16px;
    color: #101010;
    margin-bottom: 20px;
  }
  .materialListBox {
    border: 1px solid #bbbbbb;
    padding: 20px 10px;
    .materialListCon {
      border: 1px solid #bbbbbb;
      padding: 10px;
      margin-bottom: 20px;
      .materialListName {
        font-weight: 400;
        font-size: 16px;
        color: #101010;
        margin-bottom: 20px;
      }
      .materialListText {
        font-weight: 400;
        font-size: 14px;
        color: #a1a3ac;
      }
    }
  }

  .btnBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>
